<template>
  <view class="climber-tabbar">
    <view 
      v-for="(item, index) in tabList" 
      :key="index" 
      class="tab-item" 
      @tap="switchTab(index)"
    >
      <text class="icon" :class="{ active: active === index }">{{ item.icon }}</text>
      <text class="label" :class="{ active: active === index }">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ClimberTabbar',
  props: {
    active: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tabList: [
        { text: '首页', icon: '🏠', path: '/pages/climber/home' },
        { text: '订单', icon: '📋', path: '/pages/climber/orders' },
        { text: '我的', icon: '👤', path: '/pages/climber/mine' }
      ]
    }
  },
  methods: {
    switchTab(index) {
      if (index === this.active) return
      const path = this.tabList[index].path
      uni.reLaunch({ url: path })
    }
  }
}
</script>

<style scoped>
.climber-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1rpx solid #e5e5e5;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon {
  font-size: 44rpx;
  margin-bottom: 6rpx;
  opacity: 0.5;
}

.icon.active {
  opacity: 1;
}

.label {
  font-size: 22rpx;
  color: #666;
}

.label.active {
  color: #1989fa;
  font-weight: 600;
}
</style>

